<template>
  <view class="index-page">
    <!-- paddingTop不生效可换成marginTop -->
    <view class="tab_title" :style="{ paddingTop: statusBarHeight}">
      <!-- 左上角自定义样式 -->
      <view class="menu_btn flex-betwee box-sizing" :style="{ position: 'fixed', top: menuTop, height: menuHeight}">
        <view class="list">
          <template v-for="(item,item_index) in list">
            <view class="item" :key="item.id" @click="set(item_index, true)">
              <view style="position: relative;text-shadow: 0 2upx 4upx rgba(0,0,0,0.2);">{{ item.name }}
              </view>
              <view v-show="indexs==item_index" class="xian"></view>
              <!--    提示-->
              <view class="message" v-if="item.id===0 && message">
                <view class="box-message">
                  <view class="message-icon"></view>
                  <text>{{ text }}</text>
                  <text class="time">{{ time }}s</text>
                </view>
              </view>
            </view>
          </template>
        </view>
      </view>
      <view class="yangshi" v-if="indexs==2"
            :style="{ position: 'fixed',height:contentTop,top:'0px'}"></view>
    </view>

  </view>
</template>

<script>
export default {
  name: "index-top-tap",
  props: ['index', 'list'],
  data() {
    return {
      statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight, //状态栏的高度（可以设置为顶部导航条的padding-top）
      menuWidth: '100%',
      menuHeight: uni.getStorageSync('menuInfo').menuHeight,
      menuBorderRadius: uni.getStorageSync('menuInfo').menuBorderRadius,
      menuRight: uni.getStorageSync('menuInfo').menuRight,
      menuTop: uni.getStorageSync('menuInfo').menuTop,
      contentTop: uni.getStorageSync('menuInfo').contentTop,
      indexs: "",
      message: false,
      time: 5,
      text: "",
      showBg: false
    };
  },
  methods: {
    set(index, isClick = false) {
      this.indexs = index;
      this.$emit("setSwiper", index, isClick);
    },
    async getConfig() {
      console.log('getConfig start')
      let {data} = await this.$NoteApi.doRequest("get", 'ruiVideo/getCustomerRewardType', '', '')
      return new Promise((resolve, reject) => {
        console.log(data, '消息状态，，，')
        resolve(data.data)
      })
    },
    async showMessage() {
      let res = await this.getConfig()
      this.text = res.openType === 1 ? `随手刷视频，每天可得${res.upLimitYuan}毛钱！` : `随手刷视频，每天可得${res.upLimit}积分！积分当钱花`
      this.message = true
      var Interval = setInterval(() => {
        this.time--
        if (this.time < 0) {
          clearInterval(Interval)
          this.message = false
          uni.setStorageSync("indexMessage", false)
        }
      }, 1000)
    },
    updataShowBg(status) {
      // console.log('status', status);
      this.showBg = status
    }
  },
  created() {
    this.indexs = this.index
  },
  mounted() {
    this.$eventBus.$on('showBg', this.updataShowBg)
  },
  beforeDestroy() {
    this.$eventBus.$off('showBg', this.updataShowBg)
  }
}
</script>


<style lang="scss" scoped>
.list {
  width: 100%;
  display: flex;
}

.item {
  width: 20%;
  text-align: center;
  position: relative;
}

.xian {
  width: 0%;
  height: 6upx;
  border-radius: 4upx;
  background-color: #fff;
  position: absolute;
  left: 50%;
  bottom: 5upx;
  transform: translate(-50%, -50%);
  animation: xian .5s forwards;
  box-shadow: 0 2upx 4upx 0 rgba(0, 0, 0, 0.2);
}

@keyframes xian {
  0% {
    width: 0%;
  }
  100% {
    width: 50%;
  }
}

.yangshi {
  width: 100%;
  z-index: 1;

  animation: yangshi .5s forwards;
}

@keyframes yangshi {
  0% {
  }
  100% {
    background-color: #000;
  }
}

.yangshi2 {
  width: 100%;
  z-index: 1;

  animation: yangshi2 .1s forwards;
}

@keyframes yangshi2 {
  0% {
  }
  100% {
    background-color: #EC2A1B;
  }
}

.yangshi view {
  width: 26upx;
  height: 6upx;
  background-color: #fff;
  border-radius: 13upx;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -50%);

}

.box-sizing {
  box-sizing: border-box;
  width: 100% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38upx;
  font-weight: 600;
  color: #fff;
  z-index: 2;
}

.index-page {
  z-index: 2;
  width: 100vw;
  // padding: 32rpx;

  .tab_title {
    width: 100%;
    height: 44px !important; //这个是固定的44px（所有小程序顶部高度都是 = 44px + 手机系统状态栏高度）
    line-height: 44px;
    text-align: center;
    // background-color: #d00;

    position: fixed;
    top: 0;
    z-index: 999;
    color: #000;
    font-weight: 500;

    .menu_btn {
      // background-color: #ffffff; //这个是小程序默认的标题栏背景色
      // overflow: hidden;

      // position: fixed; //行内式写了固定定位--目的是去掉下划页面一起滚动问题
      .arrowleft {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-160%, -50%) !important;
        -webkit-transform: translate(-160%, -50%) !important;
      }

      .text_box {
        width: 1rpx;
        height: 20px;
        background-color: #ddd;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) !important;
        -webkit-transform: translate(-50%, -50%) !important;
      }

      .home {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(60%, -50%) !important;
        -webkit-transform: translate(60%, -50%) !important;
      }
    }
  }
}

.message {
  width: 597upx;
  height: 200upx;
  position: absolute;
  left: 55%;
  bottom: -150upx;
  transform: translate(0%, 50%);
  //background-image: url("https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/dacu/message-dashed.png");
  border: 2upx dashed #fff;
  border-radius: 12upx;
  background-size: 100% 100%;
  padding: 20upx;
}

.box-message {
  width: 100%;
  height: 100%;
  background-color: RGBA(36, 180, 101, .9);
  border-radius: 12upx;
  box-sizing: border-box;
  padding: 20upx;
  font-size: 40upx;
  color: #fff;
  font-weight: 600;
  line-height: 55upx;
  text-align: left;
  position: relative;
}

//.box-message-icon {
//  width: 0;
//  height: 0;
//  border-left: 20upx solid transparent;
//  border-right: 20upx solid transparent;
//  border-bottom: 20upx solid RGBA(36, 180, 101, .9);
//  position: absolute;
//  top: -20upx;
//  left: 11upx;
//
//}

.message-icon {
  width: 58upx;
  height: 48upx;
  background-image: url("https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/dacu/laba.png");
  background-size: 100% 100%;
  display: inline-block;
}

.time {
  position: absolute;
  bottom: 14upx;
  right: 18upx;
}
</style>
